const $ = layui.$;
export default class Register{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        // 渲染当前模块的页面内容
        let template = `
        <style>
            html,body{
                height:100%;
            }
            body{
                background-color: #c2c2c2;
                display: flex;
                align-items: center;
            }
            .card{
                width:500px;
                margin:auto;
            }
            .card .header{
                text-align: center;
                font-size: 2em;
            }
        </style>
        <div class="layui-card card">
        <div class="layui-card-header header">注册</div>
        <div class="layui-card-body">
          <form class="layui-form" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="username"
                  required
                  lay-verify="required|username"
                  placeholder="请输入用户名"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-block">
                <input
                  type="password"
                  name="pwd"
                  required
                  lay-verify="required|pwd"
                  placeholder="请输入密码"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">确认密码</label>
              <div class="layui-input-block">
                <input
                  type="password"
                  name="confirm"
                  required
                  lay-verify="required|confirm"
                  placeholder="请输入密码"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
  
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="registerForm">
                  立即提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">
                  重置
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
        `;
        $("#root").html(template);
    }
    handle(){
        // 处理当前模块涉及的所有事件
        var form = layui.form;
        //监听提交
        form.on("submit(registerForm)", function (data) {
        //   layer.msg(JSON.stringify(data.field));
          $.ajax({
              type:"post",
              url:"/users",
              data:{
                  username:data.field.username,
                  pwd:data.field.pwd
              },
              success(){
                  window.location = "#login"
                
              }
          });
          return false;
        });

        // 自定义校验规则
        form.verify({
            username(value,item){//value：表单的值、item：表单的DOM对象
                if(!/^\w{6,20}$/.test(value)){
                    return "用户名必须为6-20位字母、数字、下划线构成";
                }
                let msg;
                $.ajax({
                    type:"get",
                    url:"/users",
                    async:false,
                    data:{
                        username:value
                    },
                    success(data){
                        if(data.status == 0){
                            msg = "用户名重复";
                        }
                    }
                });
                return msg;
            },
            pwd(value,item){//value：表单的值、item：表单的DOM对象
                if(!/^.{6,20}$/.test(value)){
                    return "密码必须为6-20任意字符构成";
                }
            },
            confirm(value,item){
                if(value != $("[name=pwd]").val()){
                    return "两次密码不一致";
                }
            }
        });
    }
}